<template>
	<view class="aboutUs">
		<!-- 轮播 -->
		<view class="swiper_box" style="height: auto!important;" v-if="aboutUsData.banner.length!=0">
			<!-- <u-swiper :list="aboutUsData.banner" height="418"></u-swiper> -->
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000"
				:style="{height:sweiperHeight+'px'}" @change="sweiperHeightFn" :circular="true">
				<swiper-item v-for="(v,i) in aboutUsData.banner" :key="i">
					<view class="swiper-item">
						<image :src="v.img" mode="widthFix" style="width: 750rpx;" :ref="'imgs'+i" @load="imgs"
							:data-index='i'></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<!-- tab 选择栏 -->
		<view class="tab_box flex-r-a-c" style="position: sticky;top: 0px;left: 0;z-index: 9999;">
			<view class="tab_item" :class="item.tabIndex == tabCurrent ? 'active' : ''" v-for="(item,index) in tabList"
				:key="index" :data-tabCurrent="item.tabIndex" @tap.stop="tabChange">
				<view class="bj"></view>
				<view class="text">{{item.name}}</view>
			</view>
		</view>
		<!-- 视频 -->
		<view class="video" :style="aboutUsData.video != '' ? 'display: block;' : 'display: none;' ">
			<video :src="aboutUsData.video" controls :poster="aboutUsData.img"></video>
		</view>
		<!-- 公司介绍/我要加盟/我要应聘 -->
		<view class="richText">
			<!-- <rich-text style="width: 100%;" :nodes="aboutUsData.content"></rich-text> -->
			<u-parse :tag-style="style" :html="aboutUsData.content"></u-parse>
		</view>

		<!-- 联系客服 -->
		<!-- 		<view class="customerService">
			<image src="../../static/icon/customerService.png" mode="widthFix"></image>
		</view> -->

		<!-- 客服 -->
		<view
			style="width:60px;height: 60px;position: fixed;right:0px;bottom: 35vh;border-radius: 50%;overflow:hidden;">
			<button @tap.stop="customerService" class="btn_none flex-c-c-c" session-from=''>
				<image src="/static/icon/customerService.png" mode="widthFix" style="width: 44px;"></image>
			</button>
		</view>
		<!-- 一键置顶 -->
		<view class="flex-c-c-c" v-if="isZD" @click="ZD_fn"
			style="width:60px;height: 60px;position: fixed;right:0px;bottom: 25vh;border-radius: 50%;overflow:hidden;">
			<image src="/static/icon/zhiding.png" mode="widthFix" style="width: 44px;border-radius: 50%;"></image>
		</view>
		<!-- 招聘/加盟 -->
		<view class="recruit" :class="tabCurrent == 3 ? 'white' : ''" v-if="tabCurrent == 4 || tabCurrent == 3">
			<view class="form">
				<view class="formTop flex-r-c-c">
					<view class="circular" v-if="tabCurrent == 3">
						<view class="green l"></view>
					</view>
					<view class="number" style="margin-top: 40rpx;" v-if="tabCurrent == 4">04</view>
					<view class="text" v-if="tabCurrent == 4">申请加入</view>
					<view class="text" v-if="tabCurrent == 3">我要加盟</view>
					<view class="circular">
						<view class="green r"></view>
					</view>
				</view>

				<view class="formContent" :class="tabCurrent == 3 ? 'joinIn' : ''">

					<view class="list">
						<view class="label flex-r-b-c">
							<view class="label_l">您的姓名：</view>
							<view class="label_r">(系统已加密，请放心填写)</view>
						</view>
						<input type="text" placeholder="请输入..." v-model="form.name" data-type="name" @input="input" />
					</view>

					<view class="list" v-if="tabCurrent == 4">
						<view class="label flex-r-b-c">
							<view class="label_l">您的年龄：</view>
							<view class="label_r">(系统已加密，请放心填写)</view>
						</view>
						<input type="text" placeholder="请输入..." v-model="form.age" data-type="age" @input="input" />
					</view>

					<view class="list">
						<view class="label flex-r-b-c">
							<view class="label_l">您的电话：</view>
							<view class="label_r">(系统已加密，请放心填写)</view>
						</view>
						<input type="text" placeholder="请输入..." v-model="form.phone" data-type="phone" @input="input" />
					</view>

					<view class="list" v-if="tabCurrent == 3">
						<view class="label flex-r-b-c">
							<view class="label_l">您的意向地区：</view>
							<view class="label_r">(自填)</view>
						</view>
						<input type="text" placeholder="请输入..." v-model="form.area" data-type="area" @input="input" />
					</view>

					<view class="list">
						<view class="label">
							<view class="label_l" v-if="tabCurrent == 4">系统职位：</view>
							<view class="label_l" v-if="tabCurrent == 3">您的投资预算：</view>
						</view>

						<view class="position flex-r-b-c">
							<view class="list" :class="item.tabIndex == positionIndex ? 'active' : ''"
								v-for="(item,index) in aboutUsData.menu" :key="index"
								@tap="positionCurrent(item.tabIndex)">{{item.name}}
								<image v-if="item.tabIndex == positionIndex" src="/static/mine/active.png" mode="">
								</image>
							</view>
						</view>
					</view>

					<view class="submit" v-if="tabCurrent == 3" @tap="submit">提交</view>
				</view>

			</view>

			<view class="submit" @tap="submit" v-if="tabCurrent == 4">提交</view>

			<view class="bottomIntroduce">
				<view class="list flex-r-b-c">
					<view class="list_l">
						<view style="font-size: 32rpx;">氧发堂，期待您的加入</view>
						<view style="font-size: 22rpx; margin-top: 10rpx;">点击打开二维码，了解更多详情</view>
						<view class="tel flex-r-b-c">
							<view style="26rpx">{{aboutUsData.phone}}</view>
							<view class="btn" @tap.stop="dial(aboutUsData.phone)">一键拨打</view>
						</view>
					</view>
					<image :src="aboutUsData.qrcode" mode="" @tap="imgsFX_fn"></image>
				</view>
			</view>

			<view class="share flex-r-c-c" v-if="tabCurrent == 4 || tabCurrent == 3">
				<view style="font-size: 44rpx; color: #656565; margin-right: 50rpx;">分享有惊喜</view>
				<button class="btn btn_none" :open-type="isShare ? 'share' : '' " @tap="forward">一键转发</button>
			</view>

		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabCurrent: 1, // tab 的下标
				aboutUsData: {}, // 关于我们
				form: { // 表单数据
					name: '',
					age: '',
					phone: '',
					area: ''
				},
				// tab 的数据
				tabList: [{
					name: '公司介绍',
					tabIndex: 1
				}, {
					name: '我要加盟',
					tabIndex: 3
				}, {
					name: '我要应聘',
					tabIndex: 4
				}],
				positionIndex: 1, // 职位的ID
				sweiperHeight: uni.upx2px(850),
				isZD: false,
				isShare: uni.getStorageSync('user_info') ? true : false
			};
		},
		onLoad(el) {

			if (el?.tabCurrent) {
				this.tabCurrent = el.tabCurrent
			}

			if (el?.userID) { //绑定用户上级
				this.$api.User_savePid({
					id: el.userID
				})
			}

			this.getAboutUsList() // 获取关于我们
		},

		onShareAppMessage(res) {
			return {
				title: '氧发堂关于我们',
				path: `store/aboutUs/aboutUs?tabCurrent=${this.tabCurrent}&userID=${uni.getStorageSync('user_info').id}`,
				desc: '关于我们',
				content: ' ',
				success(res) {
					uni.showToast({
						title: '分享成功',
						icon: "none"
					})
				},
				fail(res) {
					uni.showToast({
						title: '分享失败',
						icon: 'none'
					})
				}
			}
		},
		onPageScroll(hei) {
			this.isZD = hei.scrollTop > this.$hei
		},
		methods: {
			ZD_fn() { //一键置顶
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 200
				});
			},
			imgsFX_fn() { //长按
				// // #ifdef  MP-WEIXIN
				// console.log(666)
				// wx.previewMedia({
				// 	showmenu: true,
				// 	sources: [{
				// 		url: this.aboutUsData.qrcode
				// 	}]
				// })
				// //	#endif
				let image = []
				image[0] = this.aboutUsData.qrcode
				uni.previewImage({
					current: 0,
					urls: image
				})

			},
			// 获取关于我们
			getAboutUsList() {
				let that = this
				that.$api.aboutUs_list({
					type: that.tabCurrent
				}).then(res => {
					let arr = []
					res.data.data.banner.forEach(item => {
						item = {
							img: item
						}
						arr.push(item)
					})

					that.aboutUsData = res.data.data
					res.data.data.banner = arr
					that.positionIndex = res.data.data.menu.length == 0 ? '' : res.data.data.menu[0].tabIndex
				})
			},
			imgs(i) {
				let index = i.currentTarget.dataset.index
				this.aboutUsData.banner[index].height = uni.upx2px(750) / i.detail.width * i.detail.height
			},
			sweiperHeightFn(i) {
				this.sweiperHeight = this.aboutUsData.banner[i.detail.current].height
			},
			// tab 切换
			tabChange(e) {
				this.tabCurrent = e.currentTarget.dataset.tabcurrent
				this.form = {
					name: '',
					age: '',
					phone: '',
					area: ''
				}
				this.getAboutUsList()
				this.ZD_fn()
			},
			// 职位切换
			positionCurrent(e) {
				this.positionIndex = e
			},
			forward() {
				if (!uni.getStorageSync('user_info')) {
					uni.navigateTo({
						url: '/mine/login/login'
					})
				}
			},
			// 点击拨打电话
			dial(tel) {
				uni.makePhoneCall({
					phoneNumber: tel
				});
			},
			// 表单获取
			input(e) {
				console.log(e)
				let that = this
				let type = e.currentTarget.dataset.type
				let content = e.detail.value
				type == 'name' ? that.form.name = content : type == 'age' ? that.form.age = content : type == 'phone' ?
					that.form.phone = content : type == 'area' ? that.form.area = content : ''
			},
			// 客服
			customerService() {
				if (!uni.getStorageSync('user_info')) {
					uni.navigateTo({
						url: '/mine/login/login'
					})
				} else {

					wx.openCustomerServiceChat({ // 客服
						extInfo: {
							url: 'https://work.weixin.qq.com/kfid/kfcfabe188f48472048'
						},
						corpId: 'ww482f5a23d248eb06',
						success(res) {
							console.log(res)
						},
						fail(err) {
							console.log(err)
						}
					})

				}


			},
			// 提交
			submit() {
				if (!uni.getStorageSync('user_info')) {
					uni.navigateTo({
						url: '/mine/login/login'
					})
				} else {
					let that = this
					let reg_tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
					that.tabCurrent == 4 ? that.form.type = 1 : that.form.type = 2
					that.form.position = that.positionIndex
					if (that.form.name == '') {
						uni.showToast({
							title: '请填写你的姓名',
							icon: 'none'
						})
					} else if (that.form.age == '' && that.form.type == 1) {
						uni.showToast({
							title: '请填写你的年龄',
							icon: 'none'
						})
					} else if (that.form.area == '' && that.form.type == 2) {
						uni.showToast({
							title: '请填写你的意向区域',
							icon: 'none'
						})
					} else if (!reg_tel.test(that.form.phone)) {
						uni.showToast({
							title: '请填写正确的手机号',
							icon: 'none'
						})
					} else {
						that.$api.aboutUs_form(that.form).then(res => {
							console.log(res)
							uni.showToast({
								title: '你的申请已提交',
								icon: 'none'
							})
							that.form = {
								name: '',
								age: '',
								phone: '',
								area: ''
							}
						})
					}
				}

			}
		}
	}
</script>

<style lang="less">
	.aboutUs {

		width: 100vw;

		._img {
			display: block !important;
		}

		.swiper_box {
			width: 100%;
			height: 418rpx;
		}

		.tab_box {
			width: 100%;
			height: 90rpx;
			background-color: #FFFFFF;

			.tab_item {
				width: 33%;
				height: 100%;
				text-align: center;
				line-height: 90rpx;
				color: #464646;
				font-size: 32rpx;
				font-weight: bold;
				position: relative;
			}

			.active {
				.bj {
					width: 100%;
					height: 100%;
					background: rgba(69, 128, 110, 0.2);
					filter: blur(25px);
				}

				.text {
					width: 100%;
					color: #45806E;
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
				}

				&::after {
					content: ' ';
					width: 30%;
					height: 8rpx;
					background-color: #45806E;
					border-radius: 8rpx;
					position: absolute;
					bottom: 0;
					left: 50%;
					transform: translateX(-50%);
				}
			}
		}

		// 
		.video {
			width: 100%;
			height: 418rpx;
			margin-top: 6rpx;

			video {
				width: 100%;
				height: 100%;
			}
		}

		// 
		.richText {
			width: 100%;
		}

		// 
		.customerService {
			width: 90rpx;
			height: 90rpx;
			position: fixed;
			bottom: 30%;
			right: 0;

			image {
				width: 86rpx;
				height: 86rpx;
			}
		}

		//
		.white {
			background-color: #FFFFFF !important;
		}

		.recruit {
			width: 100vw;
			background-color: #E7EFFF;

			.form {
				width: 90%;
				height: auto;
				margin: 0rpx auto;

				.formTop {
					width: 100%;

					.number {
						color: #F3AE55;
						font-size: 120rpx;
					}

					.text {
						color: #35685A;
						font-size: 48rpx;
						margin: 0 50rpx;
					}

					.circular {
						width: 50rpx;
						height: 50rpx;
						background-color: #F3AE55;
						border-radius: 50%;
						position: relative;

						.green {
							width: 36rpx;
							height: 36rpx;
							background-color: #35685A;
							border-radius: 50%;
							position: absolute;
						}

						.l {
							bottom: -10rpx;
							right: -10rpx;
						}

						.r {
							bottom: -10rpx;
							left: -10rpx;
						}
					}
				}

				//
				.joinIn {
					margin-top: 40rpx !important;
					border: 1px solid #35685A !important;
					box-shadow: 0px 5px 0px #35685A !important;
					height: auto !important;
				}

				.formContent {
					width: 100%;
					height: 956rpx;
					border-radius: 20rpx;
					margin-top: -58rpx;
					border: 1px solid #3687FE;
					box-shadow: 5px 5px 0px #9BCEC5;
					background-color: #FFFFFF;

					.list {
						width: 90%;
						margin: 60rpx auto;
						height: auto;

						.label_l {
							font-size: 36rpx;
							font-weight: bold;
						}

						.label_r {
							font-size: 28rpx;
							font-weight: 500;

							&::after {
								content: '*';
								color: #F3AE55;
								display: inline-block;
								margin-left: 20rpx;
							}
						}
					}

					.position {
						width: 100%;
						height: 80rpx;
						margin-top: 40rpx;

						.list {
							width: 30%;
							height: 100%;
							border-radius: 10rpx;
							background-color: #F4F4F4;
							color: #999999;
							font-size: 28rpx;
							font-weight: 500;
							line-height: 80rpx;
							text-align: center;

							image {
								width: 52rpx;
								height: 38rpx;
								position: absolute;
								right: 0;
								bottom: 0;
							}

						}

						.active {
							background-color: #FFFFFF;
							color: #35685A;
							border: 1px solid #35685A;
							position: relative;
						}
					}

					input {
						width: 100%;
						height: 80rpx;
						background-color: #F4F4F4;
						border-radius: 10rpx;
						margin-top: 30rpx;
						box-sizing: border-box;
						padding: 0rpx 20rpx;
					}
				}
			}

			//
			.submit {
				width: 80%;
				height: 100rpx;
				line-height: 100rpx;
				text-align: center;
				font-size: 40rpx;
				color: #35685A;
				border: 1px solid #35685A;
				background-color: #FFFFFF;
				border-radius: 100rpx;
				margin: 100rpx auto;
			}

			// 
			.bottomIntroduce {
				box-sizing: border-box;
				padding-bottom: 30rpx;
				border-bottom: 1px dashed #949494;

				.list {
					width: 90%;
					height: auto;
					margin: 40rpx auto;

					image {
						width: 148rpx;
						height: 148rpx;
					}

					.list_l {
						width: 70%;
						color: #35685A;

						.tel {
							margin-top: 10rpx;

							.btn {
								width: 180rpx;
								height: 60rpx;
								line-height: 60rpx;
								text-align: center;
								border-radius: 60rpx;
								background-color: #35685A;
								color: #FFFFFF;
								font-size: 22rpx;
							}
						}
					}

				}
			}

			//
			.share {
				width: 100vw;
				height: 200rpx;
				box-sizing: border-box;
				padding: 30rpx;

				.btn {
					width: 236rpx;
					height: 84rpx;
					line-height: 84rpx;
					text-align: center;
					border: 2px solid #35685A;
					background-color: #FFFFFF;
					border-radius: 80rpx;
					color: #35685A;
					font-size: 32rpx;
				}
			}
		}
	}
</style>
